{% extends "base.html" %}

{% block head %}
    <title>Ansible部署系统</title>
    <script type="text/javascript">

        // 分页设置
        function get_page(pagenow, pagesize,search){

            //把数据返回给后端
            info = {"pagenow": pagenow, "pagesize": pagesize, search: search}


            // ajax 返回数据
            $.ajax({
                url: '/deploy/get_by_page',   // 与后端获取的数据
                type: 'post',              // 请求格式使用post提交
                cache: false,
                // data 返回分页数据
                data: JSON.stringify(info),
                success: function (data) {
                    allresult = JSON.parse(data);
                    $("#tbodycontent").html("");
                    for (i = 0; i < allresult.length; i++) {
                        tmpone = '<tr>'
                        // --name, hosts_path, hosts_pattern, module, args, forks
                        tmpone = tmpone + '<td>' + allresult[i]['name'] + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['hosts_path'] + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['hosts_pattern'] + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['module'] + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['args'] + '</td>'
                        tmpone = tmpone + '<td>' + allresult[i]['forks'] + '</td>'
                        tmpone = tmpone + '</tr>'
                        $("#tbodycontent").append(tmpone);
                    }
                }
            });
            pagedown = '<button type="button" onclick="get_page(' + (pagenow - 1) + ',' + pagesize + ',\'' + search + '\')" class="btn btn-sm btn-success" style="margin:5px">上一页</button>'
            pageup = '<button type="button" onclick="get_page(' + (pagenow + 1) + ',' + pagesize + ',\'' + search + '\')" class="btn btn-sm btn-success" style="margin:5px">下一页</button>'
            $("#pageinfo").html("当前页：" + pagenow);
            $("#pageinfo").append(" " + pagedown);
            $("#pageinfo").append(" " + pageup);
        }


        // 返回第几页 1为第一页， 20 代表多少条
        $(document).ready(function () {
            get_page(1, 15, '')
            $('#bt_search').click(function () {
                text_search = $('#text_search').val();
                get_page(1, 15, text_search)
            });

        });
    </script>
{% endblock %}


{% block body %}
    <!--服务器搜索的模态框-->
    <div class="container">
        <br/>
        <div class="row">
            <div class="col">
                <form class="form-inline">
                    <input type="text" class="form-control" id="text_search">
                    <button type="button" class="btn btn-success" id="bt_search">搜索</button>
                </form>
                <!--name, hosts_path, hosts_pattern, module, args, forks-->

                <table class="table table-bordered table-hover" style="margin-top: 5px">
                    <thead>
                    <th>部署名</th>
                    <th>主机配置</th>
                    <th>主机或主机组</th>
                    <th>模块</th>
                    <th>模块参数</th>
                    <th>并发数</th>
                    </thead>
                    <tbody id="tbodycontent">

                    </tbody>
                </table>

                <p id="pageinfo" class="pagination">
                </p>
            </div>
        </div>
    </div>

{% endblock %}